<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-2">

      </div>
      <div class="col-8">
        <div>
<!--          <div>-->
<!--            <div class="w">-->
<!--              <img src="2.jpeg" class="img">-->
<!--              <span class="name">曾渝晋</span>-->
<!--            </div>-->
<!--            <div style="background-color: turquoise">-->
<!--              <div class="row">-->
<!--                <div class="col-1"><a href="">我的主页</a></div>-->
<!--                <div class="col-1"><a href="">历史记录</a></div>-->
<!--                <div class="col-1"><a href="">我的收藏</a></div>-->
<!--                <div class="col-1"><a href="videomanage.html">视频管理</a></div>-->
<!--                <div class="col-2"></div>-->
<!--                <div class="col-2"></div>-->
<!--              </div></div>-->
<!--          </div>-->
          <div class="row" style="padding-top: 40px">
            <div>
              <div style="font-size: 25px">视频管理</div>
            </div>
            <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
            <div class="row ">
              <div class="col-2"><a href="javascript:" @click="query.status=1">可用视频*</a></div>
              <div class="col-2"><a href="javascript:" @click="query.status=0">审核中*</a></div>
              <div class="col-2"><a href="javascript:" @click="query.status=2">审核未通过*</a></div>
<!--              <div class="col-2"><a href="javascript:" @click="query.status=3">被封禁*</a></div>-->
            </div>
            <template v-for="(i,x) in page.list" :key="x">
              <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
              <div style="padding:20px">
                <div class="row">
                  <div class="col-2"><a><img :src="request.pic(i.cover_pic)"></a></div>
                  <div class="col-8">
                    <a >{{ i.title }}</a><br><br>
                    <a >{{i.up_time.slice(0,10)}}</a><br><br>
                    <h>播放量： {{i.play_num}} <span v-if="false">弹幕： 评论：  投币:   收藏： 点赞：  转发:</span></h>
                  </div>
                  <div class="col-2">
                    <div style="margin-top: 40px">
                      <form>
                        <a href=" " v-if="false"><input type="button" value="编辑稿件"></a>
                        <button class="btn btn-link" v-if="i.status==1" @click="playVideo(i.videoid,true)">播放视频</button>
                        <input type="button" value="删除稿件" @click="request.get('user/deleteVideoRepository',{videoIds:i.videoid}).then(re=>{if (re)page.list.splice(x,1)})">
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </template>
<!--
            <div style="padding:20px">
              <div class="row">
                <div class="col-2"><a><img src=" "></a></div>
                <div class="col-8">
                  <a href="">标题</a><br><br>
                  <a href="">上传时间</a><br><br>
                  <h>播放量：  弹幕： 评论：  投币:   收藏： 点赞：  转发: </h>
                </div>
                <div class="col-2">
                  <div style="margin-top: 40px">
                    <form>
                      <a href=" "><input type="button" value="编辑稿件"></a>
                      <input type="button" value="删除稿件">
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
            <div style="padding:20px">
              <div class="row">
                <div class="col-2"><a><img src=" "></a></div>
                <div class="col-8">
                  <a href="">标题</a><br><br>
                  <a href="">上传时间</a><br><br>
                  <h>播放量：  弹幕： 评论：  投币:   收藏： 点赞：  转发: </h>
                </div>
                <div class="col-2">
                  <div style="margin-top: 40px">
                    <form>
                      <a href=" "><input type="button" value="编辑稿件"></a>
                      <input type="button" value="删除稿件">
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
            <div style="padding:20px">
              <div class="row">
                <div class="col-2"><a><img src=" "></a></div>
                <div class="col-8">
                  <a href="">标题</a><br><br>
                  <a href="">上传时间</a><br><br>
                  <h>播放量：  弹幕： 评论：  投币:   收藏： 点赞：  转发: </h>
                </div>
                <div class="col-2">
                  <div style="margin-top: 40px">
                    <form>
                      <a href=" "><input type="button" value="编辑稿件"></a>
                      <input type="button" value="删除稿件">
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
            <div style="padding:20px">
              <div class="row">
                <div class="col-2"><a><img src=" "></a></div>
                <div class="col-8">
                  <a href="">标题</a><br><br>
                  <a href="">上传时间</a><br><br>
                  <h>播放量：  弹幕： 评论：  投币:   收藏： 点赞：  转发: </h>
                </div>
                <div class="col-2">
                  <div style="margin-top: 40px">
                    <form>
                      <a href=" "><input type="button" value="编辑稿件"></a>
                      <input type="button" value="删除稿件">
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
            <div style="padding:20px">
              <div class="row">
                <div class="col-2"><a><img src=" "></a></div>
                <div class="col-8">
                  <a href="">标题</a><br><br>
                  <a href="">上传时间</a><br><br>
                  <h>播放量：  弹幕： 评论：  投币:   收藏： 点赞：  转发: </h>
                </div>
                <div class="col-2">
                  <div style="margin-top: 40px">
                    <form>
                      <a href=" "><input type="button" value="编辑稿件"></a>
                      <input type="button" value="删除稿件">
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
            <div style="padding:20px">
              <div class="row">
                <div class="col-2"><a><img src=" "></a></div>
                <div class="col-8">
                  <a href="">标题</a><br><br>
                  <a href="">上传时间</a><br><br>
                  <h>播放量：  弹幕： 评论：  投币:   收藏： 点赞：  转发: </h>
                </div>
                <div class="col-2">
                  <div style="margin-top: 40px">
                    <form>
                      <a href=" "><input type="button" value="编辑稿件"></a>
                      <input type="button" value="删除稿件">
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
            <div style="padding:20px">
              <div class="row">
                <div class="col-2"><a><img src=" "></a></div>
                <div class="col-8">
                  <a href="">标题</a><br><br>
                  <a href="">上传时间</a><br><br>
                  <h>播放量：  弹幕： 评论：  投币:   收藏： 点赞：  转发: </h>
                </div>
                <div class="col-2">
                  <div style="margin-top: 40px">
                    <form>
                      <a href=" "><input type="button" value="编辑稿件"></a>
                      <input type="button" value="删除稿件">
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
-->
          </div>
          <div aria-label="Page navigation example">
            <ul class="pagination justify-content-end" >
              <li class="page-item">
                <a class="page-link">共{{page.pages}}页</a>
              </li>
              <li :class="'page-item'+(page.isFirstPage?' disabled':null)"><a class="page-link" @click="query.page--">上一页</a></li>
              <li v-for="i in page.navigatepageNums"
                  :key="i" :class="'page-item'+(page.pageNum==i?' active':null)">
                <a class="page-link" @click="query.page=i">{{ i }}</a>
              </li>
              <li :class="'page-item'+(page.isLastPage?' disabled':null)"><a class="page-link" @click="query.page++">下一页</a></li>
            </ul>
          </div>

        </div>
        <div class="col-2">

        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import request from "@/hooks/request";
import {inject, reactive, ref, Ref, watch} from "vue";
import {PageInfo, pageInfo, VideoData} from "@/types/AllData";

const uuid=inject<Ref<number>>('uuid')
const playVideo=inject('playVideo')
const query=reactive({
  page:1,
  num:10,
  status:1
})
const videoRepo=ref<VideoData[]>([])
const page=ref<PageInfo<VideoData>>(pageInfo)
const getUserRepo=async ()=>{
  page.value= await request.get('user/videoListToManage',query)
}
getUserRepo()
watch(query,()=>{
  getUserRepo()
})
</script>
<style scoped src="../assets/css/VideoManage.css"/>
<style scoped>
</style>